<template>
  <div class="components_test">
    <div @click="handleClick">components_test{{ name }}</div>
    <div @click="onClick(45645645645)">props</div>
  </div>
</template>

<script lang="ts">
import { ref, reactive, defineComponent, toRefs, toRef } from "vue";
export default defineComponent({
  props: {
    name: {
      type: String,
      default: "我的",
    },
    onClick: {
      type: Function,
      default: () => {},
    },
  },
  emits: ["handleClick"],
  setup(props, context) {
    // 其中props是响应式不能随便使用es6解构，context不是响应式可以使用es6解构
    let { name } = toRefs(props); // 将props转化为响应式，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
    // let name = toRef(props, 'name'); // 针对单个相应式数据
    let handleClick = () => {
      console.log(props, context);
      context.emit("handleClick", 324343);
      // context.attrs
      // context.slots
      // context.expose
    };
    return {
      handleClick,
      name,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>